<template>
  <div class="manage-wrap">
    <div class="manage-con" v-if="showPage == 1">
      <div class="company-box">
        <span class="title">企业选择:</span>
        <div class="content-box">
          <span class="company" v-text="company" @click="openCompanyList"></span>
          <div class="arrow"></div>
        </div>
      </div>
      <div class="employ-box" @click="employ">
        <span class="title">员工管理</span>
        <div class="arrow"></div>
      </div>
      <div class="employ-box" @click="punch">
        <span class="title">考勤记录</span>
        <div class="arrow"></div>
      </div>

      <div class="open-box" v-show="showCompany" @click="closeCompanyList">
        <div class="open-list">
          <div class="name" v-for="(item,index) in companyList" :key="index"
               @click="selectCompany(item.id,item.mechanismName)">{{item.mechanismName}}
          </div>
        </div>
      </div>
    </div>

    <empty v-if="showPage == 2"></empty>
  </div>
</template>

<script>
  import {baseUrl} from "../../config/env"
  import {getUrlKey, setSessionStore, getSessionStore} from "../../config/util"
  import empty from "../../components/errorpage"

  export default {
    data() {
      return {
        company: "",
        showCompany: false,
        mechanismId: "",
        companyList: [],
        userSign: "",
        showPage: 0
      }
    },
    mounted() {
      this.userSign = getUrlKey("sgin");
      let base64 = require('js-base64').Base64;
      if (this.userSign != "" && this.userSign != "null" && this.userSign != null) {
        setSessionStore("success", base64.encode(this.userSign));
        this.userSign = base64.decode(getSessionStore("success"));
      } else {
        this.userSign = base64.decode(getSessionStore("success"));
      }
      this.queryMechanism();
    },
    methods: {
      openCompanyList() {
        this.showCompany = true;
      },
      closeCompanyList() {
        this.showCompany = false;
      },
      selectCompany(id, name) {//选择所在企业
        this.showCompany = false;
        this.company = name;
        this.mechanismId = id;
      },
      queryMechanism() {//查询获取企业列表
        let time = (new Date()).getTime();
        let url = baseUrl + "/data/query_teacher_mechanism?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/data/query_teacher_mechanism?sgin=" + this.userSign + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data != null && resultObj.data.length > 0) {
              this.companyList = resultObj.data;
              this.mechanismId = this.companyList[0].id;
              this.company = this.companyList[0].mechanismName;
              this.showPage = 1;
            }
          } else if (resultObj.code == 20045) {
            this.showPage = 2;
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        })
      },
      employ() {//员工管理
        this.$router.push({path: '/punshlist', query: {id: this.mechanismId, name: this.company}});
      },
      punch() {//考勤记录
        this.$router.push({path: '/punshrecordlist', query: {id: this.mechanismId}});
      }
    },
    components: {
      empty
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../assets/stylus/mixin.styl"

  .manage-wrap
    wh(100%, 100%)
    background: rgba(242, 242, 242, 1)
    overflow: hidden
    .company-box
      display: flex
      align-items: center
      wh(100%, 2rem)
      background: rgba(255, 255, 255, 1)
      border-bottom: 0.027rem solid #F2F2F2
      .title
        margin-left: 0.307rem
        margin-right: 0.227rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .content-box
        flex: 1
        position: relative
        margin-right: 0.32rem
        height: 1.067rem
        border: 0.027rem solid rgba(102, 102, 102, 1)
        border-radius(0.16rem)
        .company
          display: inline-block
          padding-left: 0.347rem
          wh(95%, 1.067rem)
          line-height: 1.067rem
          font-size: 0.4rem
          color: rgba(102, 102, 102, 1)
        .arrow
          position: absolute
          top: -0.15rem
          bottom: 0
          margin: auto
          right: 0.293rem
          width: 0.28rem
          height: 0.28rem
          border-top: 0.065rem solid rgba(153, 153, 153, 1)
          border-right: 0.067rem solid rgba(153, 153, 153, 1)
          transform: rotate(-225deg)
    .employ-box
      display: flex
      align-items: center
      wh(100%, 1.28rem)
      background: rgba(255, 255, 255, 1)
      border-bottom: 0.027rem solid #F2F2F2
      .title
        margin-left: 0.307rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .arrow
        margin-left: auto
        margin-right: 0.347rem
        width: 0.28rem
        height: 0.28rem
        border-top: 0.067rem solid rgba(153, 153, 153, 1)
        border-right: 0.067rem solid rgba(153, 153, 153, 1)
        transform: rotate(45deg)
    .open-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 88
      fj(center, center)
      background-color: rgba(0, 0, 0, 0.5)
      .open-list
        position: fixed
        z-index: 99
        bottom: 0
        left: 0
        wh(100%, 6.44rem)
        background: #FFF
        overflow: auto;
        .name
          fj(center, center)
          height: 1.28rem
          border-bottom: 1px solid #EEE
          cursor: pointer
          size-color(0.44rem, #666666)
          &:hover
            color: #3CAFFF
</style>
